
<template>
  <div class="content">
    <div class="data-list">
      <div v-for="(item, index) in dataList" :key="index">
        <a-button type="link" @click="openMd(item)" :disabled="!item.url">{{
          item.name
        }}</a-button>
      </div>
    </div>
    <a-modal
      v-model:open="drawerData.visible"
      :title="drawerData.title"
      width="520"
      :closable="false"
      :footer-style="{ textAlign: 'right' }"
    >
      <div class="modal-body">
        <div v-html="drawerData.url"></div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const dataList = [
  {
    name: "VUE全家桶指什么？",
    url: require("@/textmd/vueQuanJiaTong.md")?.default,
  },
  {
    name: "VUE2/3生命周期",
    url: require("@/textmd/vue2ShengMingZhouQi.md")?.default,
  },
  {
    name: "VUE2常用api",
    url: require("@/textmd/vue2api.md")?.default,
  },
  {
    name: "VUE3常用api",
    url: require("@/textmd/vue3api.md")?.default,
  },
  {
    name: "VUE23跨组件传值",
    url: require("@/textmd/vue23SpanData.md")?.default,
  },
  {
    name: "VUEX",
    url: require("@/textmd/vuex.md")?.default,
  },
  {
    name: "http协议",
    url: "",
  },
  {
    name: "http与https的区别",
    url: require("@/textmd/httpYuHttps.md")?.default,
  },
  {
    name: "react 常用hook",
    url: require("@/textmd/reactHook.md")?.default,
  },
  {
    name: "redux",
    url: "",
  },
  {
    name: "redux和useReducer的区别",
    url: "",
  },
  {
    name: "es6/7常用的特性",
    url: require("@/textmd/esApi.md")?.default,
  },
  {
    name: "TCP 三次握手与四次握手",
    url: require("@/textmd/woShou3or4.md")?.default,
  },
  {
    name: "浏览器渲染页面的过程",
    url: require("@/textmd/liuLanQiCreateWeb.md")?.default,
  },
  {
    name: "闭包",
    url: require("@/textmd/bibao.md")?.default,
  },
  {
    name: "继承",
    url: require("@/textmd/jiCheng.md")?.default,
  },
  {
    name: "双向绑定原理",
    url: require("@/textmd/towBind.md")?.default,
  },
  {
    name: "diff原理",
    url: require("@/textmd/diff.md")?.default,
  },
  {
    name: "this指向",
    url: require("@/textmd/thisZhiXiang.md")?.default,
  },
  {
    name: "箭头函数与普通函数的区别",
    url: require("@/textmd/funType.md")?.default,
  },

  {
    name: "TS十三中基础语法",
    url: require("@/textmd/TsApi.md")?.default,
  },
  {
    name: "mvc和mvvm的区别",
    url: require("@/textmd/mvcAndMvvm.md")?.default,
  },
  {
    name: "js 装饰器",
    url: "",
  },
  {
    name: "webpack常见面试题",
    url: require("@/textmd/webpackApi.md")?.default,
  },
  {
    name: "红任务 微任务",
    url: require("@/textmd/hongOrWei.md")?.default,
  },
  {
    name: "单例模式",
    url: require("@/textmd/danLiMoShi.md")?.default,
  },
  {
    name: "数据劫持，发布者模式",
    url: "",
  },
  {
    name: "flutter",
    url: "",
  },
  {
    name: "dart",
    url: "",
  },
];

const drawerData = reactive({
  visible: false,
  title: "",
  url: "",
});
const openMd = (params) => {
  drawerData.title = params.name;
  drawerData.url = params.url;
  drawerData.visible = true;
};
</script>
<style lang="less" scoped>
.content {
  padding: 20px;
  .data-list {
    > div {
      display: inline-block;
    }
  }
}
.modal-body {
  max-height: 500px;
  overflow: auto;
}
</style>